<template>
    <div class="wrap">
        <el-row type="flex" class="nav">
            <router-link
                replace
                :to="links[index]"
                class="navitem" 
                v-for="(item,index) in routes" 
                :key="item">
                {{item}}
            </router-link>

        </el-row>
        <el-row>
            <slot name="stitle"/>
        </el-row>
    </div>
</template>

<script>
    export default {
        props:{
            routes:{
                type:Array,
                default:[]
            },
            links:{
                type:Array,
                default:[]
            }
        },
        mounted(){
            console.log(this.links)
        }
    }
</script>

<style lang="less" scoped>
    .router-link-exact-active,.router-link-active {
        color: #1B75BD!important;
        background-color: #D1DEE9;
        border-bottom: 2px solid #F42525;
    }
    .wrap {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E5E5E5;
        user-select: none;
        .nav {
            align-items: center;
            .navitem {
                font-size:14px;
                font-weight:400;
                color:rgba(102,102,102,1);
                line-height:24px;
                display: inline-block;
                margin-right: 45px;
                text-decoration: none;
                padding: 8px;
                padding-bottom: 20px;
            }
        }
    }
</style>